<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>临时费用申请列表</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link rel="stylesheet" href="/dist/plugins/select2/select2.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=39cd89cd">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">

    <style>
        .table > tbody > tr > td {
            height: 48px;
            max-height: 44px;
            overflow: hidden;
        }

        .table > tbody > tr > td span {
            max-height: 44px;
            line-height: 22px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .saveModle {
            width: 500px;
            height: 300px;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -250px;
            margin-top: -150px;
            background: #fff;
            border-radius: 10px;
            z-index: 1978;
            display: none;
            border: 1px solid #cfcfcf;
        }

        .saveModle .top {
            height: 34px;
            line-height: 34px;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            padding-left: 7px;
            border-bottom: 1px solid #cfcfcf;
            background: #fff;
        }

        .saveModle .top .title {
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            float: left;
            background: #fff;
        }

        .saveModle .top .btn {
            font-size: 20px;
            width: 34px;
            height: 22px;
            line-height: 12px;
            display: inline-block;
            float: right;
        }

        .saveModle .top .btn:hover {
            color: red;
        }

        .saveModle .saveBtn {
            margin: 0 auto;
            margin-top: 35px;
            display: block;

        }

        /*#tbList tr:nth-child(odd){*/
        /*background-color:#ECFAFD;*/
        /*}*/
    </style>
</head>

<body>
<section class="content" id="app">
    <div style="height: 25px;margin-bottom: 10px;">

        <div class="pull-left" style="width:120px;margin-left:10px;">
            <select v-model="searchParams.costSmallName" class="form-control" id="costSmallName"
                    style="height:25px;font-size:12px;line-height:25px;padding-top:0px;padding-bottom:0px;padding-left:6px;">
                <option>费用名称</option>
                <option v-for="(item,i) in auditFlagList" v-bind:value="item.value">{{item.name}}
                </option>
            </select>

        </div>
        <input class="form-control pull-left input-sm" type="text" @keyup.enter="search" id="txtCoster"
               placeholder="申请人"
               style="width: 120px;margin-left: 10px;"
               v-model="searchParams.createUserName"/>

        <input class="form-control pull-left input-sm" type="text" @keyup.enter="search"
               placeholder="关键字"
               style="width: 120px;margin-left: 10px;"
               v-model="searchParams.key"/>
        <button type="button" class="btn oaBtn btn-sm" @keyup.enter="search" @click="search"
                style="margin-left: 10px;">
            查询
        </button>
        <div class="clearfix"></div>
        <!-- /.box-tools -->
    </div>
    <div class="box-body no-padding iframeH2" style="overflow: auto;" id="scrollDiv">
        <div id="progress" class="wyui-progress"></div>
        <table class="table table-hover table-bordered text-center table-striped">
            <thead>
            <tr>
                <!--v-if="pageType=='pay'" 2018-03-12 09:44:21更改用款:增加左侧勾选框-->
                <th style="width:3%">
                    <input type="checkbox" id="checkAll" v-model="isCheckedAll"
                           v-if="pageType=='pay'"/>
                </th>
               <th style="width:9%;">姓名</th>
                <th style="width:9%;">日期</th>
                <th style="width:9%">费用名称</th>
                <th style="width:9%">金额</th>
                <th style="width:9%">是否有发票</th>
                <th style="width:30%">备注</th>
                <th style="width:15%">当前状态</th>
                <th style="width:10%">操作</th>
            </tr>
            </thead>
            <tbody id="tbList">
            <tr v-for="(item,i) in 3">
                <td style="width:20px;"><input type="checkbox"
                                               enabled="isEnable(item)"
                                               v-model="item.checked"/>
                </td>
                <td>{{item.createUserName}}</td>
                <td>{{formatDate(item.createTime)}}</td>
                <td>{{item.costSmallName}}</td>
                <td>{{item.money}}</td>
                <td>{{item.invoiceFlag=="1"?"有":"无"}}</td>

                <td style="text-decoration: none;text-align:left"><i></i>{{item.remark}}</td>
                <td class="td-value1" style="width: 100px">
                    <span v-if="item.auditFlag=='-1'">未提交</span>
                    <span v-if="item.auditFlag=='0'">待-{{item.currentAuditorName}}-审核</span>
                    <span v-if="item.auditFlag=='1'">{{item.currentAuditorName}}审核通过</span>
                    <span v-if="item.auditFlag=='2'">{{item.currentAuditorName}}已驳回</span>
                </td>
                <td>

                    <a href="javascript:void(0);" v-if="showABtn(item,'browser')"
                       @click="gotoDetail(item.id,'browser')">&nbsp;查看&nbsp;</a>
                    <a href="javascript:void(0);" v-if="showABtn(item,'payAudit')"
                       @click="gotoDetail(item.id,'payAudit')">&nbsp;审核&nbsp;</a>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="oa-pager text-center" style="margin-top: 5px;">
            共
            <span id="allCount"> 0 </span>条记录&nbsp;&nbsp;&nbsp;
            <span id="nowPage"> 1 </span>/<span id="allPage">1</span>&nbsp;&nbsp;&nbsp;
            <span class="oa-pager-button" id="first">首页</span>
            <span class="oa-pager-button" id="prev">上一页</span>
            <span class="oa-pager-button" id="next">下一页</span>
            <span class="oa-pager-button" id="last">尾页</span>
        </div>
    </div>
</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=558d0414"></script>

<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="/dist/plugins/select2/select2.full.min.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script type="text/javascript">
    function refresh() {
        $.wyui.page.queryParams.requestPage = 1;
        $.wyui.page.getByPage();
    }

    var app = new Vue({
        el: '#app',
        data: {
            auditFlagList: [
                {value: '现金加油费', name: '现金加油费'},
                {value: '油卡加油费', name: '油卡加油费'},
                {value: '招待费', name: '招待费'},
                {value: '住宿费', name: '住宿费'},
                {value: '其他', name: '其他'},
            ],

            companyList: [],
            searchParams: {
                userId: getCurrentUser().id,
                costSmallName:'费用名称',
                auditFlag: '',
                createUserName: '',
                key: ''
            },
            pageType: "apply",//apply:用款申请，pay:付款审核
            isCheckedAll: false,
            currentUser: getCurrentUser(),
            list: [],
            rightOpENames: [],
            copierSelectedIdx: -1,
            money: {
                main: {
                    id: ''
                },
                copiers: []
            }

        },
        methods: {
            isEnable: function (item) {
                return true;
            },
            showABtn: function (item, btnName) {
                switch (btnName) {
                    case 'browser':
                        switch (item.auditFlag) {
                            case '-1':
                                return true;
                                break;
                            case '1':
                                return currentUser.id != item.currentAuditorId;
                                break;
                            case '2':
                                return true;
                                break;
                            case '0':
                                return item.auditFlag == '0' && item.currentAuditorId != getCurrentUser().id;
                                break;
                        }
                    case 'edit':
                        return item.auditFlag == '-1' && item.createUserId == currentUser.id;
                        break;
                    case 'payAudit':
                        return item.auditFlag == '0' && item.currentAuditorId == currentUser.id;
                        break;
                    default:
                        break;
                }
            },
            gotoDetail: function (id, pageType) {
                $.dialog({
                    content: 'url:detail.html?id=' + id + '&pageType=' + pageType,
                    width: 904,
                    height: 665,
                    max: true,
                    min: true,
                    lock: true
                });
            },
            formatDate:function(now){
                var d=new Date(now);
                var hour=d.getHours();
                var minute=d.getMinutes();
                var second=d.getSeconds();
                var month=d.getMonth()+1;
                var day=d.getDate();
                if(hour<10){
                    hour="0"+hour;
                }
                if(minute<10){
                    minute="0"+minute;
                }
                if(month<10){
                    month="0"+month;
                }
                if(day<10){
                    day="0"+day;
                }
                return hour+":"+minute+" "+month+"-"+day;
            },
            search: function () {
                $.wyui.page.queryParams.requestPage = 1;
                $.extend($.wyui.page.queryParams, this.searchParams);
                console.log($.wyui.page.queryParams);
                $.wyui.page.getByPage();
            },

        },
        mounted: function () {}


    });

    $.wyui.page.dataUrl = server.ip + "/wreportCost/getByPage.json";
    $.wyui.page.queryParams.pageType = $.wyui.page.urlParams.pageType;
    $.extend($.wyui.page.queryParams, app.searchParams);
    $.wyui.page.getByPage_callback = function (records) {
        app.list = records;
        document.getElementById("scrollDiv").scrollTop = 0;
    };
    $.wyui.page.getByPage_scroll_callback = function (list) {
        if (list.length < 30) {
            isLoad = false;
        } else {
            for (var i = 0; i < list.length; i++) {
                app.list.push(list[i]);
            }
            isLoad = true;
        }
    };
    $(function () {
        $("#txtCoster").autoComplete({
            url: server.ip + urlConfig.system.user.getCosterTop10ByNameUser,
            render: function (users, panel) {
                console.log("users=" + users);
                if (users) {
                    for (var i = 0; i < users.length; i++) {
                        $("<li></li>").data("autoComplete",
                            users[i]).html("<a>" + users[i].name + "&nbsp;&nbsp;&nbsp;" +
                            "(" + "&nbsp;" + users[i].companyName + "-" + users[i].departName + "-" + users[i].roleName + "&nbsp;" + ") " + "</a>")
                            .appendTo(panel);
                    }
                }
            },
            selected: function (user) {
                console.log(user);
                //app.searchParams.userId = user.id;
                app.searchParams.createUserName = user.name;
            },
            height: 210,
            width: 300
        });
    }),
    $(function () {
        $(".saveModle").show();
        $("#txtCopier").autoComplete({
            url: server.ip + urlConfig.system.user.getTop10ByNameUser,
            render: function (users, panel) {
                for (var i = 0; i < users.length; i++) {
                    $("<li></li>").data("autoComplete",
                        users[i]).html("<a>" + users[i].name + "&nbsp;&nbsp;&nbsp;" +
                        "(" + "&nbsp;" + users[i].companyName + "-" + users[i].departName + "-" + users[i].roleName + "&nbsp;" + ") " + "</a>")
                        .appendTo(panel);
                }
            },
            selected: function (user) {
                var copierIds = new Array();
                for (var i = 0; i < app.money.copiers.length; i++) {
                    copierIds.push(app.money.copiers[i].copyPersonId);
                }
                if ($.inArray(user.id, copierIds) > -1) {
                    alert("收件人或抄送人重复");
                    $(this).val("");
                    return false;
                } else {
                    app.money.copiers.push({copyPersonId: user.id, copyPersonName: user.name});
                    $(this).val("");
                    return false;
                }
            },
            height: 210,
            width: 320,
            top: 0,
            left: 0
        });
        $(".saveModle").hide();
    });
</script>
<script>
    /************************滚动加载******************************/
    var divscroll = document.getElementById('scrollDiv');

    function divScroll() {
        var wholeHeight = divscroll.scrollHeight;
        var scrollTop = divscroll.scrollTop;
        var divHeight = divscroll.clientHeight;
        console.log(scrollTop + divHeight, wholeHeight)
        if (scrollTop + divHeight >= wholeHeight - 2) {
//            alert('滚动到底部了！');
            if (isLoad) {
                isLoad = false;
                setTimeout($.wyui.page.getByPage("scroll"), 1000);

            }

            //这里写动态加载的逻辑，比如Ajax请求后端返回下一个页面的内容
        }

    }

    divscroll.onscroll = divScroll;
</script>
</body>
</html>